.bttn-unite
  {bttnBaseStyle}
  {bttnMdSize}
  z-index: 0
  overflow hidden
  border: 1px solid cBlue;
  border-radius 100px;
  background cWhite
  color cBlue
  transition color 0.3s anim_func, border-color 0.3s anim_func
  &:before
    position: absolute;
    top 0;
    left 0
    width 100%
    height 120%
    background: #d6e3ff
    content: '';
    opacity 0
    z-index -1
    transition transform 0.15s anim_func, opacity 0.15s anim_func
    transform translate3d(-110%, -10%, 0) skewX(-20deg)
  &:after
    position: absolute;
    top 0;
    left 0
    width 100%
    height 120%
    background: #d6e3ff - rgba(0, 0, 0, 0.3)
    content: '';
    opacity 0
    z-index -1
    transition transform 0.15s anim_func, opacity 0.15s anim_func
    transform translate3d(110%, -10%, 0) skewX(-20deg)
  &:hover, &:focus
    box-shadow 0 1px 8px cBlack - rgba(0, 0, 0, .7)
    color cBlue
    transition all 0.5s anim_func
    &:before
      opacity 1
      transition transform 0.25s anim_func, opacity 0.25s anim_func
      transform translate3d(-50%, -10%, 0) skewX(-20deg)
    &:after
      opacity 1
      transition transform 0.25s anim_func, opacity 0.25s anim_func
      transform translate3d(50%, -10%, 0) skewX(-20deg)
  &.bttn-xs
    {bttnXsSize}
    &:hover, &:focus
      box-shadow 0 1px 4px cBlack - rgba(0, 0, 0, .7)
  &.bttn-sm
    {bttnSmSize}
    &:hover, &:focus
      box-shadow 0 1px 6px cBlack - rgba(0, 0, 0, .7)
  &.bttn-md
    {bttnMdSize}
    &:hover, &:focus
      box-shadow 0 1px 8px cBlack - rgba(0, 0, 0, .7)
  &.bttn-lg
    {bttnLgSize}
    &:hover, &:focus
      box-shadow 0 1px 10px cBlack - rgba(0, 0, 0, .7)
  &.bttn-default
    border-color cBlue
    color cBlue
    &:hover, &:focus
      background #d6e3ff
      color cBlue
    &:before
      background #d6e3ff - 10%;
    &:after
      background #d6e3ff
  &.bttn-primary
    border-color cBlue
    color cBlue
    &:hover, &:focus
      background cBlue
      color cWhite
    &:before
      background cBlue - 20%;
    &:after
      background cBlue
  &.bttn-warning
    border-color cYellow
    color cYellow
    &:hover, &:focus
      background cYellow
      color cWhite
    &:before
      background cYellow - 20%;
    &:after
      background cYellow
  &.bttn-danger
    border-color cRedLight
    color cRedLight
    &:hover, &:focus
      background cRedLight
      color cWhite
    &:before
      background cRedLight - 20%;
    &:after
      background cRedLight
  &.bttn-success
    border-color cGreen
    color cGreen
    &:hover, &:focus
      background cGreen
      color cWhite
    &:before
      background cGreen - 20%;
    &:after
      background cGreen
  &.bttn-royal
    border-color cPurple
    color cPurple
    &:hover, &:focus
      background cPurple
      color cWhite
    &:before
      background cPurple - 20%;
    &:after
      background cPurple